<template>
  <view>
    <view class="ctn">
      <view class="con">
        <view class="header">
          <view class="inputBox">
            <view class="city" @click="goPage('/pages/home/getCity')">杭州</view>
            <u-icon size="14" @click="goPage('/pages/home/getCity')" name="arrow-down-fill"></u-icon>
            <view class="shu">|</view>
            <u-icon size="26" name="search" color="#81D8D0"></u-icon>
            <view class="text">搜索内容</view>
          </view>
          <image @click="goPage('/pages/message/message')" class="icon" src="../../static/home/msg.png" mode="aspectFill" />
        </view>
      </view>
      <view class="main" style="margin-top: -90px; padding-bottom: 60rpx">
        <view class="banner">
          <u-swiper :list="list1" height="160"></u-swiper>
        </view>
        <view class="funBox">
          <view class="item" v-for="(item, index) in funList" :key="index" @click="goPage(item.link)">
            <image :src="item.icon" mode="aspectFill" />
            <view>{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="ysBox">
      <view class="ysItem" @click="goPage('/pages/home/branchList')">
        <view class="t">私密医美</view>
        <image src="../../static/home/mlgw.png" mode="aspectFill" />
        <view class="b">美丽顾问</view>
      </view>
      <view class="ysItem" @click="goPage('/pages/home/branchList')">
        <view class="t">中医美容</view>
        <image src="../../static/home/zyzj.png" mode="aspectFill" />
        <view class="b">中医专家</view>
      </view>
      <view class="ysItem" @click="goPage('/pages/home/branchList')">
        <view class="t">口腔美容</view>
        <image src="../../static/home/kqzj.png" mode="aspectFill" />
        <view class="b">口腔专家 </view>
      </view>
      <view class="ysItem" @click="goPage('/pages/home/branchList')">
        <view class="t">植发养发</view>
        <image src="../../static/home/zfzj.png" mode="aspectFill" />
        <view class="b">植发专家</view>
      </view>
    </view>
    <view class="main" style="padding-bottom: 20rpx">
      <image class="ad" src="../../static/home/ad.png" mode="aspectFill" />
      <view class="titleBox">
        <view class="title">项目推荐</view>
        <view class="more">查看更多 <u-icon name="arrow-right" color="#8A8A8D" size="12"></u-icon></view>
      </view>
      <view class="xmList">
        <view v-for="(item, index) in 3" :key="index">
          <XmItem />
        </view>
      </view>
    </view>
    <view class="flBox">
      <view class="tabBox">
        <view @click="tabActive = '1'" :class="{ tabItem: true, active: tabActive == '1' }">商品推荐</view>
        <view @click="tabActive = '2'" :class="{ tabItem: true, active: tabActive == '2' }">连锁分院</view>
        <view @click="tabActive = '3'" :class="{ tabItem: true, active: tabActive == '3' }">商家机构</view>
      </view>
    </view>
    <view class="spBox" v-if="tabActive === '1'">
      <view style="width: 48%" v-for="(item, index) in 3" :key="index">
        <FwItem />
      </view>
    </view>
    <view class="fyBox" v-if="tabActive === '2'">
      <FyItem />
    </view>
    <view class="fyBox" v-if="tabActive === '3'">
      <FyItem />
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import XmItem from "./components/XmItem.vue";
import FyItem from "./components/FyItem.vue";
import { goPage } from "@/utils/commonFn";
import FwItem from "./components/FwItem.vue";
import { selectBannerLst } from "@/api/home";
const tabActive = ref("1");
const list1 = ref([]);

onMounted(() => {
  getInfo();
});

const getInfo = async () => {
  const res = await selectBannerLst({ type: "1" });
  list1.value = res.activeLst.map((j: any) => j?.imgUrl).filter(Boolean);
};
const funList = [
  {
    icon: "../../static/home/zhym.png",
    text: "智慧医美",
    link: "/pages/home/smartMedicalAesthetics",
  },
  {
    icon: "../../static/home/bmal.png",
    text: "变美案例",
    link: "/pages/home/beautyCase",
  },
  {
    icon: "../../static/home/lzpx.png",
    text: "蓝钻评选",
    link: "/pages/home/blueDiamondSelection",
  },
  {
    icon: "../../static/home/yybm.png",
    text: "预约变美",
    link: "/pages/home/appointmentBeautiful",
  },
  {
    icon: "../../static/home/mlth.png",
    text: "美丽特惠",
    link: "/pages/home/beautifulSpecialOffer",
  },
  {
    icon: "../../static/home/bmsq.png",
    text: "变美社区",
    link: "/pages/home/beautifulCommunity",
  },
  {
    icon: "../../static/home/myzx.png",
    text: "名医咨询",
    link: "/pages/home/doctorConsultation",
  },
  {
    icon: "../../static/home/lsjm.png",
    text: "连锁加盟",
    link: "/pages/myPage/joinUs",
  },
];
</script>
<style lang="less" scoped>
.ctn {
  background: #fff;
  border-radius: 16rpx;
}
.con {
  width: 100%;
  padding-bottom: 100px;
  border-radius: 0 0 50rpx 50rpx;
  background: linear-gradient(180deg, #81d8d0 0%, #81d8d0 81%, rgba(129, 216, 208, 0) 100%);
}
.header {
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .inputBox {
    display: flex;
    background: #fff;
    padding: 10rpx 32rpx;
    border-radius: 50rpx;
    align-items: center;
    width: calc(100% - 150rpx);
    .city {
      font-size: 28rpx;
      color: #333333;
      margin-right: 10px;
    }
    .shu {
      color: #c6c6c6;
      padding: 0 10px;
    }
    .text {
      font-size: 28rpx;
      color: #8a8a8d;
      margin-left: 10px;
    }
  }
  .icon {
    width: 64rpx;
    height: 64rpx;
    margin-left: 15rpx;
  }
}
.funBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 55rpx;
  padding: 0 30rpx;
  margin-top: 48rpx;
  .item {
    font-size: 26rpx;
    color: #333333;
    text-align: center;
    image {
      width: 88rpx;
      height: 88rpx;
    }
  }
}
.ysBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  .ysItem {
    border-radius: 16rpx;
    color: #333333;
    border: 2rpx solid #f3f4f6;
    padding: 16rpx 24rpx;
    image {
      width: 100%;
      height: 168rpx;
    }
    .t {
      font-size: 28rpx;
      margin-bottom: 16rpx;
    }
    .b {
      font-size: 24rpx;
    }
  }
}
.ad {
  width: 100%;
  height: 194rpx;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40rpx;
  .title {
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
    position: relative;
    z-index: 2;
    &::before {
      content: "";
      position: absolute;
      left: 8px;
      bottom: 1rpx;
      width: 100rpx;
      height: 6rpx;
      background: #80d7cf;
      z-index: 1;
    }
  }
  .more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8d;
  }
}
.xmList {
  width: 100%;
  overflow-x: auto;
  margin-top: 32rpx;
  gap: 20rpx;
  display: flex;
  flex-wrap: nowrap;
}
.flBox {
  background: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 20rpx 32rpx;
  .tabBox {
    display: flex;
    justify-content: space-between;
    .tabItem {
      font-size: 32rpx;
      color: #333333;
    }
    .active {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      position: relative;
      z-index: 2;
      &::before {
        content: "";
        position: absolute;
        left: 8px;
        bottom: -10rpx;
        width: 100rpx;
        height: 6rpx;
        background: #80d7cf;
        z-index: 1;
      }
    }
  }
}
.spBox {
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fyBox {
  padding: 15rpx;
}
</style>
